<template>
  <div class="flex">
    <aCard title="基本用法">
      <a-alert>This is an info alert.</a-alert>
    </aCard>
    <aCard title="提示类型">
      <a-row :gutter="[40, 20]">
        <a-col :span="12">
          <a-alert>This is an info alert.</a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="success">This is an success alert.</a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="warning">This is an warning alert.</a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="error">This is an error alert.</a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="normal">
            <template #icon>
              <icon-exclamation-circle-fill />
            </template>
            This is an normal alert.
          </a-alert>
        </a-col>
      </a-row>
    </aCard>
    <aCard title="提示标题">
      <a-row :gutter="[40, 20]">
        <a-col :span="12">
          <a-alert title="Info">This is an info alert.</a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert title="Success" type="success"
            >This is an success alert.</a-alert
          >
        </a-col>
        <a-col :span="12">
          <a-alert type="warning">
            <template #title> Warning </template>
            This is an warning alert.
          </a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="error">
            <template #title> Error </template>
            This is an error alert.
          </a-alert>
        </a-col>
      </a-row>
    </aCard>
    <aCard title="可关闭">
      <a-row :gutter="[40, 20]">
        <a-col :span="12">
          <a-alert closable>This is an info alert.</a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="success" closable>This is an success alert.</a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="warning" closable>
            <template #title> Warning </template>
            This is an warning alert.
          </a-alert>
        </a-col>
        <a-col :span="12">
          <a-alert type="error" closable>
            <template #title> Error </template>
            This is an error alert.
          </a-alert>
        </a-col>
      </a-row>
    </aCard>
    <aCard title="操作项">
      <a-row :gutter="[40, 20]">
        <a-col :span="24">
          <a-alert type="error" closable>
            This is an info alert.
            <template #action>
              <a-button size="small" type="primary">Detail</a-button>
            </template>
          </a-alert>
        </a-col>
        <a-col :span="24">
          <a-alert title="Example" closable>
            This is an info alert.
            <template #action>
              <a-button size="small" type="primary">Detail</a-button>
            </template>
          </a-alert>
        </a-col>
      </a-row>
    </aCard>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}
</style>
